<!--
 * @Descripttion: 
 * @version: 
 * @Author: dudu
 * @Date: 2020-02-18 09:53:54
 * @LastEditors: dudu
 * @LastEditTime: 2020-08-14 11:06:34
 -->
<template>
  <div class="home">
    <el-popover placement="top"
                @show="handleShowPanel"
                v-model="visible">
      <QueryPanel :baseConfig="baseConfig"
                  @changeCompValue="handleChangeComponentValue"
                  ref="queryPanel" />
      <div style="text-align: right; margin: 0">
        <el-button size="mini"
                   type="text"
                   @click="handleCancel">重置</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="handleConfirm">查询</el-button>
      </div>
      <el-button slot="reference">查询</el-button>
    </el-popover>
  </div>
</template>

<script>


import QueryPanel from "@components/QueryPanel"
import { queryConfigMixins } from './queryConfigMixins'


export default {
  name: "home",
  components: {
    QueryPanel
  },
  mixins: [queryConfigMixins],
  data () {
    return {
      visible: false,
      baseConfig: {
        //默认显示
        defaultShowKeys: ['custom']
      }
    };
  },
  methods: {
    handleCancel () {
      this.visible = false
      setTimeout(_ => {
        this.$refs.queryPanel.queryItems = []
      }, 500)
    },
    handleConfirm () {
      const queryPanelData = this.$refs.queryPanel.queryItems
      const valid = this.$refs.queryPanel.validator()
      if (valid) {
        console.log('查询参数接口在此调用', queryPanelData)
        //组织参数，调用接口
        this.visible = false
      }
    },
    handleShowPanel () {
      this.$refs.queryPanel.initQueryPanel()
    },
    // 处理类型为selectWithInput的select切换，改变input数量
    disposeSelectWithInput ({ value, config }) {
      const { type, parentConf } = config
      const queryPanelData = this.$refs.queryPanel.queryItems
      if (type === 'select' && parentConf && parentConf.type === 'selectWithInput') {
        // 创建新的配置
        const queryIem = queryPanelData.find(item => item.config.key === parentConf.key)
        const inputItem = queryIem.config.children[1]
        if (value === 'between') {
          if (queryIem.config.children.length === 2) {
            const first = {
              ...inputItem,
              rules: inputItem.rules.map(rule => ({
                ...rule,
                result: null
              })),
              placeholder: config.key === 'account' ? '下限金额' : '下限把握度',
              data: { value: '' }
            }
            const second = {
              ...inputItem,
              rules: inputItem.rules.map(rule => ({
                ...rule,
                result: null
              })),
              placeholder: config.key === 'account' ? '上限金额' : '上限把握度',
              data: { value: '' }
            }
            queryIem.config.children.pop()
            queryIem.config.children.push(first, second)
          }
        } else {
          if (queryIem.config.children.length === 3) {
            queryIem.config.children.splice(1, 2)
            queryIem.config.children.push({
              ...inputItem,
              rules: inputItem.rules.map(rule => ({
                ...rule,
                result: null
              })),
              placeholder: '请输入金额',
              data: { value: '' }
            })
          }
        }
      }

    },
    // 查询条件修改回调，可再此做特殊处理
    handleChangeComponentValue (data) {
      this.disposeSelectWithInput(data)
    },
    querySearchAsync (key) {
      return (queryString, cb) => {
        console.log('远程搜索', key, queryString)
        const results = [{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        { "value": "泷千家(天山西路店)", "address": "天山西路438号" }]
        cb(results)
      }
    }
  }
};
</script>
<style>
</style>
